<template>
  <div class="home">
    <home-header class="header"></home-header>
    <home-banner class="banner"></home-banner>
    <home-introduce></home-introduce>
    <home-vision></home-vision>
    <home-energize></home-energize>
    <home-business></home-business>
    <home-brand :brandList="brandList"></home-brand>
    <home-footer></home-footer>
  </div>
</template>

<script>
import HomeHeader from 'components/Header'
import HomeBanner from './components/Banner'
import HomeIntroduce from './components/Introduce'
import HomeVision from './components/Vision'
import HomeEnergize from './components/Energize'
import HomeBusiness from './components/Business'
import HomeBrand from './components/Brand'
import HomeFooter from 'components/Footer'
import Brand from '@/model/brand'
export default {
  name: 'Home',
  components: {
    HomeHeader,
    HomeBanner,
    HomeIntroduce,
    HomeVision,
    HomeEnergize,
    HomeBusiness,
    HomeBrand,
    HomeFooter
  },
  data () {
    return {
      brandList: []
    }
  },
  mounted () {
    this.getBrands()
  },
  methods: {
    async getBrands () {
      const condition = { is_market: 1 }
      this.brandList = await Brand.getBrandsByCondition(condition)
    }
  }
}
</script>
<style lang="stylus" scoped>
  .header
    position fixed
    top 0
    left 0
    width 100%
  .banner
    margin-top 1.2rem
</style>
